

## 工业英寸（英寸）
对于生活在使用公制系统的其他人来说，自 1933 年以来，“工业英寸”已被定义为 2.54 厘米或 0.0254 米的数学等效值。

## 设备像素
计算机屏幕以像素显示事物。显示器上的单个物理“光点”，能够独立于其邻居显示全色，称为像素。我们将屏幕上的物理像素称为“设备像素”（不要与稍后解释的CSS 像素混淆）。
设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。
pt在css单位中属于真正的绝对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米。

不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点，也可以认为是打印机的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。

注意，我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。
## 显示像素密度、每英寸点数 (DPI) 或每英寸像素数 (ppi)

DPI（Dots Per Inch，每英寸点数）是一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。
DPI是打印机、鼠标等设备分辨率的度量单位。是衡量打印机打印精度的主要参数之一，一般来说，DPI值越高，表明打印机的打印精度越高。

Pixels Per Inch也叫像素密度单位，每英寸像素数 (PPI) 。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高
当用于描述显示器设备时ppi与dpi是同一个概念 。

当提到屏幕显示时，这两个单位本质上是在谈论同一件事，其中 DPI 是常用但不正确的单位，而 PPI 是更准确但无人关心的单位。设备像素的物理尺寸只是其 DPI 的倒数。

我目前使用的 MacBook Air (2011) 配备 125 DPI 显示屏，所以
（一个设备像素的宽度或高度）= 1/125 英寸 = 0.008 英寸 = 0.02032 厘米

## CSS 像素 (px)
又叫逻辑像素  

px是一个相对元素
1.4 CSS像素的真正含义
由于不同的物理设备的物理像素的大小是不一样的，所以css认为浏览器应该对css中的像素进行调节，
使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 ，
目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，而css规范中使用**"参考像素"**来进行换算。

1参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。它并不是1/96英寸长度，而是从一臂之遥的距离处看解析度为96DPI的设备输出一单位（即1/96英寸）时视线与水平线的夹角。通常认为常人臂长为28英寸，所以它的视角是:
(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。  
(1/96) / (28 * 2 * 3.14 / 360) = 0.0213。

由于css像素是一个视角单位，所以在真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取css像素

## css 中逻辑像素和物理像素是什么？
在 CSS 中，逻辑像素（也称为设备独立像素或CSS像素）是独立于设备的单位，物理像素是显示器或设备上的实际像素点。逻辑像素是一种抽象的单位，使得开发人员可以使用相同的 CSS 尺寸尺寸（如像素，EM，REM等）来处理不同的设备，而不用考虑实际的屏幕尺寸和分辨率。

物理像素是屏幕上显示内容的最小单位，一个像素点包含了一个红、绿、蓝三种基本颜色，可以通过各种形式的组合和调整来呈现出所需要的各种颜色和图案。不同的设备有不同的物理像素密度，比如普通屏幕的物理像素密度为1，而Retina屏幕的物理像素密度为2。

逻辑像素和物理像素之间的关系可以通过设备像素比（device pixel ratio，简称DPR）来描述，它是物理像素和逻辑像素之间的比率，即一个逻辑像素所占据的物理像素数量。例如，当DPR为2时，一个逻辑像素将占用4个物理像素。

## 设备像素比
设备像素比（Device Pixel Ratio）指的是设备上物理像素和逻辑像素之间的比例关系。在高清屏幕出现之前，大多数设备的设备像素比都是 1:1，即一个逻辑像素对应一个物理像素。但是，随着高清屏幕的普及，设备像素比也越来越高，比如 iPhone X 的设备像素比为 3:1，即一个逻辑像素对应三个物理像素。

在 CSS 中，我们可以使用 device-pixel-ratio 媒体查询来根据不同的设备像素比为不同的屏幕提供不同的样式。例如，下面的代码将为设备像素比为 2:1 的屏幕提供 2 倍大小的字体：

```css 
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body {
    font-size: 2em;
  }
}
```

在 JavaScript 中，我们可以使用 window.devicePixelRatio 属性来获取当前设备的设备像素比。例如，下面的代码将会输出当前设备的设备像素比：

```css 
console.log(window.devicePixelRatio);
```


## 参考 
(博客)['https://github.com/jawil/blog/issues/21']
(博客)['https://hacks.mozilla.org/2013/09/css-length-explained/']
(博客)['https://zhuanlan.zhihu.com/p/59897607']
